<template>
	<view class="relative full-screen" @click="onClickOutSide">
		<view class="absolute" style="z-index:0;left:0;right:0;top:0;bottom:0;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);"></view>
		<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
			<view class="flex center w-full">
				<image class="size-32 radius-10 mr-4" src="@/static/image/home-logo.png"></image>
				<view>
					<view class="fs-14 font-semibold" style="background:linear-gradient(84deg, #FF1F42 20.53%, #FF5632 77.19%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;">火动通告</view>
					<view class="fs-8 text-black">一秒搞定周末活动</view>
				</view>
			</view>
		</uni-nav-bar>
		<z-paging ref="paging" :auto="false" :fixed="false" :refresher-enabled="false" loading-more-no-more-text="到底啦～" :paging-style="{height: `calc(100vh - ${navBarHeight || 0}px)`}" v-model="searchResultList" @query="queryList">
			<template #top>
				<search-bar v-model="queryParams.keyword" @search="onSearch" @clean="onClean">
					<template #left>
						<view class="flex item-center">
							<popup-picker pickerStyle="" :list="searchTypes" :current="currentPickerIndex" :formater="(item)=>item.text" @onItemPick="onItemPick">
								<view class="flex item-center relative flex-shrink fs-16">
									<text>{{currentSearchType}}</text>
									<image class="size-16" src="./icon-down.svg"></image>
								</view>
							</popup-picker>
							<view class="mx-4 h-20" style="width:0.5px;background:#E0E0E0;"></view>
						</view>
					</template>
				</search-bar>
			</template>
			<template #empty>
				<view v-if="queryParams.keyword" class="flex-1 flex-col center">
					<image style="width:150px;height:150px;" src="./search-empty.svg"></image>
					<view class="mt-4 fs-12 text-color-regular">未搜索到相关{{queryParams.type===1?'活动':'商家'}}~</view>
				</view>
			</template>
			<template v-if="!queryParams.keyword && userStore.isLogin">
				<view class="flex mx-16 justify-between my-3">
					<text class="font-semibold fs-16">历史搜索</text>
					<image class="size-14" src="@/static/svg/icon-trash.svg" @click.stop="cleanAllRecord"></image>
				</view>
				<view class="flex mx-16 mt-8" style="flex-wrap:wrap;">
					<view v-for="(item,i) in recordList" :key="i" class="uni-bg-white radius-14 h-30 px-8 flex center fs-13 text-color-regular font-normal leading-22 mr-12 mb-12" @click="searchOld(item.keyword)">{{item.keyword}}</view>
				</view>
			</template>
			<template v-if="queryParams.type === 1">
				<view class="flex-col px-16">
					<ActivityItem
						v-for="(item,index) in searchResultList"
						:key="index"
						:data="item"
						class="mb-16"
						@refresh="refresh"
					/>
				</view>
			</template>
			<template v-else-if="queryParams.type === 2">
				<MerchantItem
					v-for="(item,i) in searchResultList"
					:key="i"
					:data="item"
				/>
			</template>
		</z-paging>
	</view>
</template>

<script setup name="Search">
	import {
		computed,
		onMounted,
		ref,
		unref,
		watch
	} from 'vue'
	import { useUserStore } from '@/stores/modules/user.js'
	import { searchRecordApi, searchApi, searchRecordDeleteApi } from '@/pagesC/api/search.js'
	import MerchantItem from './components/MerchantItem.vue'
	import ActivityItem from './components/ActivityItem.vue'

	const userStore = useUserStore()

	const navBar = ref(null)

	const goBack = () => uni.navigateBack()

	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	
	const onClickOutSide = () => {
		uni.$emit('onClickOutSide')
	}
	
	const searchTypes = [
		{ text: '搜商品', value: 1},
		{ text: '搜商户', value: 2},
	]
	const currentPickerIndex = ref(0)
	
	const currentSearchType = computed(() => {
		return searchTypes[currentPickerIndex.value].text
	})
	
	const onItemPick = ({ item, index }) => {
		currentPickerIndex.value = index
		queryParams.value.type = item.value
		queryParams.value.keyword && onSearch()
	}
	
	const recordList = ref([])
	const searchResultList = ref([])
	const queryParams = ref({
		keyword: '',
		pageNum: 1,
		pageSize: 10,
		type: 1 // 搜索类型：1-活动，2-商家
	})
	
	const paging = ref(null)
	
	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		searchApi(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}
	
	const onSearch = () => {
		queryParams.value.pageNum = 1
		paging.value.reload()
	}
	
	const onClean = () => {
		queryParams.value.keyword = ''
		queryParams.value.pageNum = 1
		searchResultList.value = []
		getSearchRecord()
	}
	
	const refresh = () => {
		paging.value && paging.value.reload()
	}
	
	const searchOld = (text) => {
		queryParams.value.keyword = text
		queryParams.value.pageNum = 1
		onSearch()
	}
	
	// 清空搜索记录
	const cleanAllRecord = () => {
		searchRecordDeleteApi().then(res => {
			if (res) {
				recordList.value = []
			}
		})
	}
	
	const getSearchRecord = () => {
		if(!userStore.isLogin) return
		recordList.value = []
		searchRecordApi().then(res => {
			recordList.value = res.list
		})
	}

	onMounted(() => {
		getSearchRecord()
	})
</script>
